<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <title>裁判员页面</title>
  <script src="js/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div class="layui-panel" style="display:flex">
    <div
      style="padding: 30px;border: 2px solid rgb(3, 3, 3);border-radius: 15px;width: 100px;text-align: center;height: 20px;margin: 20px;">
      裁判员页面</div>
    <table class="layui-hide" id="test"></table>

    <form class="layui-form" action="" style="width:260px;margin:20px 0 0 0px;">
      <p style="font-size:large;margin-left: 60px;width: 220px;padding-bottom: 20px;">请输入以下数据来修改评分</p>
      <div class="layui-form-item">
        <label class="layui-form-label">项目id</label>
        <div class="layui-input-block">
          <input type="text" name="projectId" required lay-verify="required" placeholder="请输入项目id" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">运动员id</label>
        <div class="layui-input-block">
          <input type="text" name="userId" required lay-verify="required" placeholder="请输入运动员id" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">评分</label>
        <div class="layui-input-block">
          <input type="text" name="socre" required lay-verify="required" placeholder="请输入评分" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
      </div>
    </form>
  </div>

</body>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js" />
<script src="js/jquery.min.js"></script>
<script>
  console.log($("#sportList"));
  layui.use(['table', 'util'], function () {
    var table = layui.table,
      util = layui.util;
    table.render({
      elem: '#test',
      url: 'http://localhost:8080/getAllUserProjects',
      parseData: function (res) {
        console.log(res);
        //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": '', //解析提示文本
          "count": res.length, //解析数据长度
          "data": res //解析数据列表
        };
      },
      //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      cellMinWidth: 200,
      cols: [
        [{
          field: 'projectId',
          width: 100,
          title: '项目id',
          sort: true
        }, {
          field: 'name',
          width: 200,
          title: '运动会项目',
        }, {
          field: 'rules',
          width: 150,
          title: '项目规则',

        }, {
          field: 'address',
          width: 100,
          title: '地点'
        }, {
          field: 'starTime',
          width: 100,
          title: '开始时间'
        }, {
          field: 'socre',
          width: 100,
          title: '评分'
        }, {
          field: 'username',
          width: 150,
          title: '运动员'
        }, {
          field: 'userId',
          width: 100,
          title: '运动员id'
        }]
      ]
    });
  });
  layui.use('form', function () {
    var form = layui.form;
    //监听提交
    form.on('submit(formDemo)', function (data) {
      console.log(data);
      $.ajax({
        url: 'http://localhost:8080/insertProject',
        type: 'post',
        data: data.field,
        async: true, //是否异步提交,默认为true
        dataType: 'JSON', //提交的数据格式为JSON,返回的数据格式也是json
        success: function (data) {
          window.location.reload(true);
        },
        error: function (data) {}
      })
      data.field.projectId = parseInt(data.field.projectId)
      data.field.userId = parseInt(data.field.userId)

      axios.post("http://localhost:8080/score", data.field, {
        headers: {
          responseType: 'json'
        }
      }).then((res) => {
        // 刷新页面
        window.location.reload(true);
      }).catch(err => {

      });

      return false;
    });
  });
</script>

</html>